<template>
  <mescroll-vue ref="mescroll" :down="mescrollDown" @init="mescrollInit">
    <el-col v-for="(item, index) in orderList" :key="index">
      <el-card shadow="never">
        <div class="top">
          <span class="fixTableId">{{ item.fixTableId }}</span>
          <span class="endTime">{{ item.endTime }}</span>
        </div>
        <hr />
        <div class="item">
          <span>报修类型：</span>
          <span class="faultClass">{{ item.faultClass }}</span>
        </div>
        <div class="item">
          <span>订单评分：</span>
          <el-rate
            v-model="item.grade"
            disabled
            show-text
            text-color="#ff9900"
          ></el-rate>
        </div>
        <el-button type="warning" @click="showDetailsPage(item)" round
          >查看详情</el-button
        >
      </el-card>
    </el-col>
  </mescroll-vue>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
  components: {
    MescrollVue // 注册mescroll组件
  },
  inject: ['reload'],
  created() {
    this.getData()
  },
  data() {
    return {
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        callback: this.downCallback
      },
      dialogVisible: false,
      orderList: [
        {
          endTime: '',
          faultClass: '',
          fixTableId: '',
          grade: 0
        }
      ],
      order: {
        address: '',
        adminWorkId: '',
        contacts: '',
        createdTime: 0,
        endTime: 0,
        faultClass: '',
        faultDetail: '',
        fixTableId: 0,
        grade: 0,
        message: '',
        phone: '',
        resultDetails: '',
        state: 2,
        studentId: '',
        workId: ''
      }
    }
  },
  methods: {
    mescrollInit(mescroll) {
      this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    downCallback() {
      setTimeout(() => {
        this.getData()
        this.mescroll.endSuccess()
      }, 1000)
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    },
    getData() {
      // 一开始获取订单列表
      this.$http
        .get('worker/order-list')
        .then(res => {
          this.orderList = res.data.data
          // 处理下时间格式
          for (const item of this.orderList) {
            item.grade = item.grade / 2
            item.endTime = this.getLocalTime(item.endTime)
          }
        })
        .catch(() => {
          return this.$message.error('获取订单列表失败')
        })
    },
    showDetailsPage(item) {
      this.$http
        .get('worker/order-pass', {
          params: {
            fixTableId: item.fixTableId
          }
        })
        .then(res => {
          this.order = res.data.data
          this.order.grade = this.order.grade / 2
          this.order.endTime = this.getLocalTime(this.order.endTime)
          this.order.createdTime = this.getLocalTime(this.order.createdTime)
          if (!this.order.message) {
            this.order.message = '当前订单尚未评价'
          }

          if (this.order.urls !== null && this.order.urls.length > 3) {
            this.order.urls = this.order.urls.split(' ')
          }

          this.$router.push({
            // 这里必须使用 name，不能使用 path
            name: 'wDetailsPage',
            params: {
              item: this.order
            }
          })
        })
        .catch(() => {
          return this.$message.error('获取订单失败')
        })
    }
  }
}
</script>

<style lang='less' scoped>
.top {
  width: 100%;
  position: relative;
  margin-top: 8px;
  font-weight: bold;
  color: rgb(129, 129, 129);
  .fixTableId {
    font-size: 30px;
  }
  .endTime {
    float: right;
    color: silver;
    font-size: 10px;
  }
}

.item {
  width: 100%;
  margin-bottom: 10px;
  span:first-child {
    font-size: 15px;
    margin-top: 8px;
    font-weight: bold;
    color: rgb(129, 129, 129);
  }

  span:last-child {
    float: right;
    color: #9d9d9d;
  }
}

.el-card {
  width: 99%;
  box-shadow: 0 3px 3px rgb(207, 207, 207);
  border-radius: 20px;
  position: relative;
  margin-top: 5%;
  .el-rate {
    float: right;
  }

  .el-button {
    margin-top: 20px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    box-shadow: 0 2px 2px rgba(56, 56, 56, 0.397);
  }
}

/deep/ .el-dialog {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(58, 58, 58, 0.596);
  .el-dialog__body {
    padding: 10px 20px;
  }
  .orderItem {
    span {
      display: block;
      text-align: center;
    }
    span:first-child {
      font-size: 15px;
      margin-top: 8px;
      font-weight: bold;
    }

    span:last-child {
      color: rgb(129, 129, 129);
    }
  }
}
</style>
